<template>
    <div class="title">
        <div class="title-container">
            <div class="left-circle circle">
                <div class="circle-top"></div>
                <div class="circle-bottom"></div>
            </div>
            <div class="middle">
                <div class="middle-head">
                    <span>{{content.first}}</span>
                    <span>/</span>
                    <span>{{content.second}}</span>
                    <span>/</span>
                    <span>{{content.third}}</span>
                    <span>/</span>
                    <span>{{content.fourth}}</span>
                </div>
                <div class="middle-content">
                    <div class="line"></div>
                    <span>{{content.title}}</span>
                    <div class="line"></div>
                </div>
            </div>
            <div class="right-circle circle">
                <div class="circle-top"></div>
                <div class="circle-bottom"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'recommendTitle',
    props:['content']
}
</script>

<style lang='less'>
@rem:100rem;

.title{
    width: 100%;
    height: 98/@rem;
    display: flex;
    align-items: center;
    .title-container{
        height: 98/@rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        .circle{
            display: flex;
            .circle-top{
                height: 26/@rem;
                width: 26/@rem;
                border-radius: 50%;
                transform: rotate(-10deg);
                background-image: linear-gradient(180deg, 
                #35a9fe 0%, 
                #916ffe 85%, 
                #ed34fe 100%), 
                linear-gradient(
                    #5b5b5b, 
                    #5b5b5b);
                background-blend-mode: normal, normal;
            }
            .circle-bottom{
                height: 14/@rem;
                width: 14/@rem;
                border-radius: 50%;
                transform: rotate(-6deg);
                background-image: linear-gradient(180deg, 
                #35a9fe 0%, 
                #916ffe 85%, 
                #ed34fe 100%), 
                linear-gradient(
                    #5b5b5b, 
                    #5b5b5b);
                background-blend-mode: normal, normal;
            }
        }
        .left-circle{
            margin-right: 22/@rem;
            .circle-top{
                transform: translate(0,-18/@rem)
            }
            .circle-bottom{
                transform: translate(0, 20/@rem);
            }
        }
        .right-circle{
            margin-left: 22/@rem;
            .circle-top{
                transform: translate(20/@rem, 9/@rem)
            }
            .circle-bottom{
                transform: translate(-11/@rem, -19/@rem);
            }
        }
        .middle{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 98/@rem;
            width: 236/@rem;
            .middle-head{
                display: flex;
                align-items: flex-end;
                margin-top: 8/@rem;
                span{
                    font-size: 30/@rem;
                    color: transparent;
                    background-image: linear-gradient(180deg, 
                    #35a9fe 0%, 
                    #916ffe 85%, 
                    #ed34fe 100%), 
                    linear-gradient(
                        #5b5b5b, 
                        #5b5b5b);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                span:nth-of-type(3){
                    font-size: 36/@rem;
                    vertical-align: bottom;
                }
                span:nth-of-type(2n){
                    margin: 0 10/@rem;
                }
            }
            .middle-content{
                height: 26/@rem;
                margin-top: 6/@rem;
                display: flex;
                align-items: center;
                justify-content: center;
                .line{
                    width: 34/@rem;
                    border-top: 1px solid #ed34fe;
                }
                span{
                    font-size: 18/@rem;
                    color: #ed34fe;
                    margin: 10/@rem;
                }
            }
        }
    }
}

</style>
